<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input
          :placeholder="$t('tableEpisode.placeholder')"
          clearable
          v-model="queryForm.query"
        ></el-input>
      </el-col>
      <el-button type="info" plain style="pointer-events: none">{{
        shows
      }}</el-button>
      <el-button type="primary" @click="handleDialogValue()" plain>{{
        $t('tableEpisode.addAnime')
      }}</el-button>
      <el-button type="primary" @click="initGetEpisodesList()" plain
        >刷 新</el-button
      >
      <el-button
        class="backAnime"
        type="primary"
        @click="backToAnime()"
        plain
        >{{ $t('tableEpisode.back') }}</el-button
      >
    </el-row>
    <el-table :data="tableData" height="440" stripe style="width: 100%">
      <el-table-column
        :min-width="item.width"
        :prop="item.prop"
        :label="$t(`tableEpisode.${item.label}`)"
        v-for="(item, index) in options"
        :key="index"
      >
        <template v-slot="{ row }" v-if="item.prop === 'time'">
          {{ $filters.filterTimes(row.time) }}
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'status'">
          <div v-if="row.status === 'loaded'">
            <el-button
              type="success"
              :icon="Check"
              plain
              style="pointer-events: none"
              >{{ $t('status.loaded') }}</el-button
            >
          </div>
          <div v-else-if="row.status === 'init'">
            <el-button
              type="info"
              :icon="CreditCard"
              plain
              style="pointer-events: none"
              >{{ $t('status.init') }}</el-button
            >
          </div>
          <div v-else-if="row.status === 'loading'">
            <el-button
              type="warning"
              loading
              plain
              style="pointer-events: none"
              >{{ $t('status.loading') }}</el-button
            >
          </div>
          <div v-else-if="row.status === 'error'">
            <el-button
              type="danger"
              :icon="Close"
              plain
              style="pointer-events: none"
              >{{ $t('status.error') }}</el-button
            >
          </div>
        </template>
        <template #default="{ row }" v-else-if="item.prop === 'url'">
          <div>
            <el-link :href="row.url" type="info" target="_blank">
              {{ row.url }}
            </el-link>
          </div>
        </template>
        <template #default="{ row }" v-else-if="item.prop === 'action'">
          <el-button
            type="warning"
            size="small"
            @click="handleDialogValue(row)"
            :icon="Edit"
            plain
          ></el-button>
          <el-button
            size="small"
            :icon="Refresh"
            @click="RefreshEpisode(row)"
            type="primary"
            plain
          ></el-button>
          <el-button
            type="success"
            size="small"
            @click="episodeDetail(row)"
            :icon="ChatLineSquare"
            plain
          ></el-button>
          <el-button
            type="danger"
            size="small"
            @click="delEpisode(row)"
            :icon="Delete"
            plain
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :size="size"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :pager-count="4"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <Dialog
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    :dialogTableVable="dialogTableVable"
    v-if="dialogVisible"
    @initGetEpisodesList="initGetEpisodesList"
  />
</template>

<script>
import Dialog from './components/dialog.vue'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'episode'
})
</script>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import {
  Delete,
  Edit,
  ChatLineSquare,
  Refresh,
  Check,
  Close,
  CreditCard
} from '@element-plus/icons-vue'
import {
  getEpisodes,
  getShows,
  deleteEpisode,
  refreshEpisode
} from '@/api/episode'
import { ref, watch } from 'vue'
import { options } from './options'
const routeValue = useRoute()
const router = useRouter()
const backToAnime = () => {
  router.back()
}

const shows = ref('')
const initGetShowsList = async () => {
  const res = await getShows({ animeId: routeValue.params.id })
  shows.value = res.shows
}
initGetShowsList()

const queryForm = ref({
  animeId: 0,
  query: '',
  pageNum: 1,
  pageSize: 10
})

queryForm.value.animeId = routeValue.params.id

const tableData = ref([])
const total = ref(0)

const initGetEpisodesList = async () => {
  const res = await getEpisodes(queryForm.value)
  tableData.value = res.episode
  total.value = res.total
}

// initGetEpisodesList()

watch(
  () => queryForm.value.query,
  () => {
    initGetEpisodesList()
  },
  { deep: true, immediate: true }
)

const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = pageSize
  initGetEpisodesList()
}
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum
  initGetEpisodesList()
}

const episodeDetail = (row) => {
  router.push({ path: `/comment/${row.id}` })
}

import { isNull } from '@/utils/filters'
const dialogVisible = ref(false)

const dialogTitle = ref('')

const dialogTableVable = ref({})

const handleDialogValue = (row) => {
  if (isNull(row)) {
    dialogTitle.value = '添加剧集'
    dialogTableVable.value = { animeId: routeValue.params.id }
  } else {
    dialogTableVable.value = JSON.parse(JSON.stringify(row))
    dialogTitle.value = '编辑剧集'
  }
  dialogVisible.value = true
}

import { ElMessage, ElMessageBox } from 'element-plus'
const delEpisode = (row) => {
  ElMessageBox.confirm('确定删除此剧集信息', '注意', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await deleteEpisode(row.id)
      ElMessage({
        type: 'success',
        message: '成功删除'
      })
      initGetEpisodesList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}

const RefreshEpisode = (row) => {
  ElMessageBox.confirm('确定刷新此剧集弹幕', '注意', {
    confirmButtonText: '刷新',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await refreshEpisode(row.id)
      ElMessage({
        type: 'success',
        message: '提交刷新弹幕'
      })
      initGetEpisodesList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消刷新弹幕'
      })
    })
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
::v-deep .el-pagination {
  margin-top: 10px;
  float: right;
  margin-bottom: 10px;
}
::v-deep .el-input_suffix {
  align-items: center;
}
::v-deep .backAnime {
  margin-right: 20px;
  margin-left: auto;
}
</style>
